<template>
  <el-dialog :title="title" :visible.sync="dialogvisible" width="750px" append-to-body class="my-dialog"
             :close-on-click-modal="false" @close="cancel">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules" >
      <el-row :gutter="10">
        <!--        <el-col :span="12">-->
        <!--          <el-form-item label="类型" prop="name">-->
        <!--            <el-select v-model="form.type" placeholder="请选择">-->
        <!--              <el-option-->
        <!--                v-for="item in options"-->
        <!--                :key="item.value"-->
        <!--                :label="item.label"-->
        <!--                :value="item.value">-->
        <!--              </el-option>-->
        <!--            </el-select>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="名称" prop="isEmpty">
            <el-input v-model="form.name" placeholder="请输入名称"/>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="24">-->
        <!--          <el-form-item label="损耗品" prop="inTime">-->
        <!--            <el-checkbox v-model="form.checked">一次性损耗品（无需归还）</el-checkbox>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="单位" prop="isEmpty">
            <el-input v-model="form.unit" placeholder="单位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采购参考价" prop="isEmpty">
            <el-input v-model="form.money" placeholder="采购参考价">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成本参考价" prop="isEmpty">
            <el-input v-model="form.price" placeholder="成本参考价">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="24">-->
        <!--          <el-form-item label="物品照片" prop="policeStation">-->
        <!--            <image-upload v-model="form.avatar" :limit="5" :isShowTip="false"/>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <!--        <el-col :span="24">-->
        <!--          <el-form-item label="描述" prop="remark">-->
        <!--            <el-input-->
        <!--              v-model="form.remark"-->
        <!--              type="textarea"-->
        <!--              maxlength="100"-->
        <!--              show-word-limit-->
        <!--              placeholder="请输入描述"-->
        <!--            />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="submitForm(1)" plain v-if="!paramId">保存-继续新增</el-button>
      <el-button type="primary" size="small" plain @click="submitForm(2)" plain v-if="!paramId">保存-资产入库</el-button>
      <el-button type="primary" size="small" plain @click="submitForm(3)" plain v-if="paramId">保存</el-button>
      <el-button @click="cancel" size="small" plain>取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getMaterial,
  addMaterial,
  updateMaterial
} from "@/api/system/material";

export default {
  props: ['visible', 'paramId'],
  name: "index",
  data() {
    return {
      dialogvisible: false,
      form: {},
      options: [{
        value: '1',
        label: '服装'
      }, {
        value: '2',
        label: '装备'
      }, {
        value: '3',
        label: '办公器材'
      }],
      title: '新增资产',
      rules: {
        isEmpty: [
          {required: true, message: "数据不能为空", trigger: "blur"}
        ],
      },
    }
  },
  watch: {
    visible() {
      this.dialogvisible = this.visible
      console.log('paramId', this.paramId)
      this.reset()
      if (this.visible) {
        if (this.paramId) {
          this.title = '编辑资产'
          getMaterial(this.paramId).then(response => {
            this.form = response.data
            this.form.isEmpty = 1
          });
        }
      }
    }
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        name: undefined, // 名称
        number: 0, // 数量
        sku: undefined, // 规格
        unit: undefined, //  单位
        money: undefined, //  单价
        price: undefined, // 出库价格
        isEmpty: 1
      };
      this.title = '新增资产'
      this.resetForm("form");
    },
    submitForm(option) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(!this.form.name){
            this.$modal.msgError("名称不能为空");
            return
          }
          if(!this.form.unit){
            this.$modal.msgError("单位不能为空");
            return
          }
          if(!this.form.money){
            this.$modal.msgError("采购参考价不能为空");
            return
          }
          if(!this.$isNumeric(this.form.money)){
            this.$modal.msgError("检查采购参考价数字格式");
            return
          }
          if(!this.form.price){
            this.$modal.msgError("成本参考价不能为空");
            return
          }
          if(!this.$isNumeric(this.form.price)){
            this.$modal.msgError("检查成本参考价数字格式");
            return
          }
          if (this.form.id != undefined) {
            updateMaterial(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit('getList')
              this.cancel();
            });
          } else {
            addMaterial(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$emit('getList')
              this.reset()
              if (option == 2) {
                this.cancel();
              }
            });
          }
        }
      });
    },
    cancel() {
      this.$emit('update:visible', false)
    },
  }
}
</script>

<style scoped>
.points-map {
  height: 400px;
}

.points-map__tip {
  color: #010101;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.mapBox {
  margin-bottom: 20px;
  padding: 0 20px;
}
</style>
